<template>
  <el-dialog
    title="预览"
    :visible.sync="visible"
    width="900px"
    top="5vh"
    :before-close="handleClose"
  >
    <div class="contentWrapper">
      <div class="contentContainer">
        <div class="fileName-box">
          {{ selectedRow.fileName }}
        </div>
        <div class="contentMain" v-loading="pdfLoading && fileUrl">
          <div
            :class="[
              judgeFileType(fileUrl) === 'empty' || !fileUrl
                ? ''
                : 'officeWrapper',
            ]"
            style="width: 900px"
          >
            <el-scrollbar class="scroll">
              <vue-office-pdf
                :src="fileUrl"
                @rendered="renderedHandler"
                @error="errorHandler"
                v-if="judgeFileType(fileUrl) === 'pdf'"
              />
              <vue-office-docx
                :src="fileUrl"
                @rendered="renderedHandler"
                @error="errorHandler"
                v-if="judgeFileType(fileUrl) === 'word'"
              />
              <Empty v-if="judgeFileType(fileUrl) === 'empty' || !fileUrl" />
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleDownloadClick">下 载</el-button>
    </span>
  </el-dialog>
</template>

<script>
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from "@vue-office/docx";
import { download } from "@/utils/fileSaver";
export default {
  name: "Disc",
  components: {
    VueOfficePdf,
    VueOfficeDocx,
  },
  props: {
    selectedRow: {
      type: Object,
      default: () => {},
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      pdfLoading: true,
      fileUrl: "",
    };
  },
  watch: {
    selectedRow: {
      handler() {
        this.pdfLoading = true;
        this.fileUrl = this.selectedRow.fileUrl;
        this.currentFileName = this.selectedRow.fileName;
      },
      deep: true,
    },
  },
  created() {},
  methods: {
    // 判断是pdf文件还是word文件
    judgeFileType(str) {
      let res = str.substring(str.length - 1, str.length);
      if (res === "x" || res === "X" || res === "c" || res === "C") {
        return "word";
      }
      if (res === "f" || res === "F") {
        return "pdf";
      }
      return "empty";
    },
    handleDownloadClick() {
      download(this.fileUrl, this.currentFileName);
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    renderedHandler() {
      this.pdfLoading = false;
    },
    errorHandler() {
      this.$message.info("pdf正在渲染中...");
      this.pdfLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 24px 12px 0 12px;
}
.contentWrapper {
  height: 76vh;
  .contentContainer {
    height: 100%;
    .fileName-box {
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      padding-bottom: 24px;
    }
    .contentMain {
      width: 100%;
      height: calc(100% - 40px);
      .officeWrapper {
        border-radius: 8px 0px 8px 8px;
        overflow: hidden;
      }
      display: flex;
      /deep/.vue-office-pdf-wrapper {
        background-color: #ffffff !important;
        width: 100%;
        overflow: hidden;
      }
      /deep/ .docx-wrapper {
        background-color: #ffffff !important;
        width: 100%;
        overflow: hidden;
      }
      /deep/.vue-office-pdf {
        overflow-x: hidden;
      }
      /deep/ .vue-office-docx {
        overflow-x: hidden;
      }

      .scroll {
        height: 100%;
        .uploadNewFileBtn {
          display: flex;
          flex-direction: row;
          justify-content: center;
          margin-top: 23px;
          .svg-icon {
            font-size: 16px;
          }
          /deep/.el-button.is-round span {
            color: #ffffff;
          }
          /deep/.el-button--primary.is-plain {
            color: #7052ff;
            background: #7052ff;
            border-color: #7052ff;
            width: 130px;
            height: 40px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 14px;
          }
          span {
            margin-left: 5px;
            color: #ffffff;
          }
        }
      }
    }
  }
}
::v-deep .el-button.is-round {
  span {
    display: flex;
    align-items: center;
  }
}

::v-deep .el-dialog__footer {
  text-align: center;
  border-top: 1px solid #f2f2f2;
}
</style>
